<!--综合态势监测-->
<template>
    <div class="rightView">
        <div class="right_box">
            <transition name="animationRL">
                <div v-show="shows">
                    <div class="container container_1 flex boxSize">
                        <div class="part_left">
                            <div class="top">
                                <div class="container_title">
                                    <span>预警记录</span>
                                </div>
                                <div class="chart_list flex boxSize">
                                    <div class="chart_item chart_item_1 flex">
                                        <div class="chart_value">{{ chart_1_data.total }}个</div>
                                        <div class="chart_name">每月预警总数</div>
                                    </div>
                                    <div class="chart_item chart_item_2 flex">
                                        <div class="chart_value">{{ chart_1_data.nodisposal }}个</div>
                                        <div class="chart_name">未处理预警数</div>
                                    </div>
                                    <div class="chart_item chart_item_3 flex">
                                        <div class="chart_value">{{ chart_1_data.disposalPercent }}%</div>
                                        <div class="chart_name">处置率</div>
                                    </div>
                                </div>
                            </div>
                            <div class="bottom">
                                <div class="container_title">
                                    <span>预警列表</span>
                                </div>
                                <!--                <div class="table_box" style="overflow-y: auto ">-->
                                <el-scrollbar class="table_box scroll-container"
                                              style="overflow-y: auto;overflow-x: hidden ">
                                    <table>
                                        <thead>
                                        <tr>
                                            <th>预警时间</th>
                                            <th>预警名称</th>
                                            <th>预警等级</th>
                                            <th>处理状态</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(item, index) in tableData" :key="index"
                                            :class="index % 2 ? 'single' : ''">
                                            <td>{{ item.alarmTime }}</td>
                                            <td>{{ item.alarmName }}</td>
                                            <td>
                                                <span v-if="item.alarmLevel === '低'" style="color: #48FF1E;">低</span>
                                                <span v-if="item.alarmLevel === '中'" style="color: #FFA21E;">中</span>
                                                <span v-if="item.alarmLevel === '高'" style="color: #F86900;">高</span>
                                            </td>
                                            <td>{{ item.disposalStatus }}</td>
                                            <td>
                                                <span class="table_btn" @click="handleDetail(item)">详情</span>
                                                <!--                                            <span class="table_btn" @click="handleSolve(item)">处理</span>-->
                                            </td>
                                        </tr>

                                        </tbody>
                                    </table>
                                </el-scrollbar>
                                <!--                </div>-->
                            </div>
                        </div>
                    </div>
<!--                    <div class="container container_1 flex boxSize">-->
<!--                        <div class="part_right">-->
<!--                            <div class="top">-->
<!--                                <div class="container_title">-->
<!--                                    <span>环境执法监督</span>-->
<!--                                </div>-->
<!--                                <div class="chart_des">投诉举报数量分析</div>-->
<!--                                <div class="chart_item">-->
<!--                                    <div class="head flex"><span class="sign"></span><span-->
<!--                                            class="chart_title">年度投诉举报次数</span></div>-->
<!--                                    <div class="flex_box flex">-->
<!--                                        <div class="chart_icon"></div>-->
<!--                                        <div class="chart_info">-->
<!--                                            <div class="chart_name">年度行政处罚次数</div>-->
<!--                                            <div class="chart_mini_name">单位/次</div>-->
<!--                                        </div>-->
<!--                                        <div class="chart_value" style="margin-left: 10px">{{-->
<!--                                            chart_7_data.yearNum-->
<!--                                            }}-->
<!--                                        </div>-->
<!--                                        <div style="margin-left: 30px">-->
<!--                                            <div class="chart_detail" style="margin-bottom: 10px">未处理完成/件<span>{{-->
<!--                                                chart_7_data.noHandle-->
<!--                                                }}</span></div>-->
<!--                                            <div class="chart_detail">同比增长数<span>{{ chart_7_data.growth }}</span>-->
<!--                                            </div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="bottom">-->
<!--                                <div class="head flex"><span class="sign"></span><span-->
<!--                                        class="chart_title">各月投诉举报次数</span></div>-->

<!--                                <div class="chart_item chart_7 boxSize" ref="chart_7">-->

<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="container container_2 boxSize">
                        <div class="container_title">
                            <span>监控列表</span>
                        </div>
                        <protection />
                    </div>
                </div>
            </transition>
            <div class="shrink" @click="shows = !shows"></div>
        </div>
        <div class="dialog_box dialog_box_1 boxSize" v-show="detailShow && shows">
            <div class="head flex">
                <div class="chart_title">
                    <div class="txt">预警详情</div>
                    <div class="line"></div>
                </div>
                <div class="chart_close" @click="detailShow = false"></div>
            </div>
            <div class="part_title">基本信息</div>
            <div class="top flex">
                <div class="top_list">
                    <div class="top_item">
                        <div class="item_name">事件名称:</div>
                        <div class="item_value">{{ eventDetail.eventName }}</div>
                    </div>
                    <div class="top_item">
                        <div class="item_name">站点名称:</div>
                        <div class="item_value">{{ eventDetail.siteName }}</div>
                    </div>
                    <div class="top_item">
                        <div class="item_name">事件级别:</div>
                        <div class="item_value">{{ eventDetail.eventLevelName }}</div>
                    </div>
                    <div class="top_item">
                        <div class="item_name">环境要素:</div>
                        <div class="item_value">{{ eventDetail.eventTypeName }}</div>
                    </div>
                </div>
                <div class="top_list">
                    <div class="top_item">
                        <div class="item_name">发现时间:</div>
                        <div class="item_value">{{ eventDetail.startTimeStr }}</div>
                    </div>
                    <div class="top_item">
                        <div class="item_name">污染类型：</div>
                        <div class="item_value">{{ eventDetail.pollutionTypeName }}</div>
                    </div>
                    <div class="top_item">
                        <div class="item_name">事件来源:</div>
                        <div class="item_value">{{ eventDetail.eventSourceName }}</div>
                    </div>
                    <div class="top_item">
                        <div class="item_name">事件状态:</div>
                        <div class="item_value">{{ eventDetail.eventStatusName }}</div>
                    </div>
                </div>
            </div>
            <div class="top flex">
                <div class="top_list full">
                    <div class="top_item">
                        <div class="item_name">事件描述:</div>
                        <div class="item_value">{{ eventDetail.description }}</div>
                    </div>
                </div>
            </div>

            <div class="part_title">任务描述</div>
            <div class="middle flex">{{ missionFields.description }}</div>
            <div class="part_title">处置流程</div>
            <div class="process_container">
                <div class="svg_item" v-html="processImages"></div>
            </div>
            <div class="part_title">处置节点</div>
            <div class="bottom">
                <div class="list" v-for="(item, index) in taskInfo" :key="index">
                    <div class="head flex">
                        <div class="icon">
                            <div class="dot"></div>
                        </div>
                        <div class="content flex">
                            <div class="title">数据分析</div>
                            <div class="name">{{ item.assigneeName }}</div>
                            <div class="status">{{ item.nodeStatusName }}</div>
                            <div class="time start">接收：{{ item.startTimeStr }}</div>
                            <div class="time end">处置：{{ item.endTimeStr }}</div>
                            <div class="time use">耗时：{{ item.useTime }}</div>
                        </div>

                    </div>
                    <div class="info flex">
                        <div class="icon">
                            <div class="line"></div>
                        </div>
                        <div class="content">
                            <div class="item flex">
                                <span class="title">是否有效：</span>
                                <span class="value"></span>
                            </div>
                            <div class="item flex">
                                <span class="title">详细信息：</span>
                                <span class="value">{{ taskInfo.taskName }}</span>
                            </div>
                            <div class="item flex img">
                                <span class="title">现场照片</span>
                                <span class="value"></span>
                            </div>
                            <div class="item flex">
                                <span class="title">附件信息：</span>
                                <span class="value source"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    getAqmsOfAlarm,
    getWgOverLast24Hours,
    getPomsOfAlarm,
    getReportingEventsNumber,
    getInspectNumber,
    getComprehensiveOfAlarm,
    getCourentDayAlarmSite,
    getDetailsOfAlarmById,
    get24HoursTrend,
    getMainPollutant,
    getSiteData,
    getAirEnv,
    getRealAqiReport,
    getSiteRealData,
    getYearAqiTrend,
    getAqiDailyData,
    getChaoBiaoCompanyNum,
    getCurrentYearCompanyData,
    getCompanyList,
    pollutionPreventionMonitoring,
    getKeyMonitor,
    keyMonitoringData,
    getComplaintData
} from '@/monitorApi/axios'
import {sendToUeMsg} from '@/utils/UeMessageUtils';
import pieEcharts from "echarts";
import * as echarts from "echarts";
import protection from "@/views/monitor/environment/components/protection.vue";

export default {
    name: "airFloatRight",
    components:{protection},
    data() {
        return {
            shows: true,
            chart_1_data: {
                disposalPercent: '',
                nodisposal: '',
                total: '',
            },
            // 预警列表数据 level 1-低，2-中，3-高  status 1-未处理， 2-处理中， 3-已处理
            tableData: [
                // {name: '名称1', time: '2020-02-12 12:00', level: 1, status: 1},
                // {name: '名称2', time: '2020-02-12 12:00', level: 2, status: 2},
                // {name: '名称3', time: '2020-02-12 12:00', level: 3, status: 3},
                // {name: '名称4', time: '2020-02-12 12:00', level: 1, status: 1},
                // {name: '名称5', time: '2020-02-12 12:00', level: 2, status: 2},
                // {name: '名称6', time: '2020-02-12 12:00', level: 3, status: 3},
            ],
            //  详情弹窗
            detailShow: false,
            processImages: '',
            taskInfo: [],
            eventDetail: {},
            missionFields: {},
            // 处理弹窗
            solveShow: false,
            selectShow: true,
            selectActive: '',
            selectOptions: [
                {label: '部门1', value: 1},
                {label: '部门2', value: 2},
                {label: '部门3', value: 3},
                {label: '部门4', value: 4},
            ],
            chart_7_data: {
                yearNum: '',
                noHandle: '',
                growth: '',
            },
        }
    },
    mounted() {
        this.initChart_1()
        // this.initChart_4()
        // this.initChart_5()
        // this.initChart_6()
        this.initChart_7()
    },
    beforeDestroy() {
    },
    methods: {
        // 详情按钮
        async handleDetail(obj) {

            const res = await getDetailsOfAlarmById({alarmId: obj.alarmId}).catch(err => err);
            console.log('预警详情点击', res)
            if (res.code === '200') {
                // this.processImages = res.data.processImages;
                this.taskInfo = res.data.taskInfo;
                this.detailShow = true;
                // this.missionFields = res.data.missionDetail?.missionFields || {};
                this.eventDetail = res.data.eventDetail;

                if (this.eventDetail.eventLatitude && this.eventDetail.eventLongitude) {
                    // 发送 预警详情点位信息
                    sendToUeMsg({
                        eventType: 'alarmInfo',
                        points: `${this.eventDetail.eventLatitude}:${this.eventDetail.eventLongitude}`,
                        name: '环境'
                        // name: `${this.missionFields.siteTypeName}`
                    })
                }
            }
        },
        // 处理按钮
        handleSolve(obj) {
            this.solveShow = true;
        },
        selectOptionsClick(obj) {
            this.selectActive = obj.value;
        },
        // 预警记录 预警列表
        initChart_1() {
            this.tableData = [];
            getAqmsOfAlarm().then(res => {
                if (res.code === '200' && res.data) {
                    console.log('预警列表数据', res.data)
                    if (res.data.record) {
                        this.chart_1_data = res.data.record;
                        let _disposalPercent = parseInt(this.chart_1_data.disposalPercent * 100) / 100;
                        this.chart_1_data.disposalPercent = _disposalPercent;
                    }
                    if (res.data.list) {
                        this.tableData = res.data.list;
                    }

                }
            })
        },
        // 告警等级
        initChart_4() {
            var echarts = require('echarts');
            var option = {
                series: [
                    {
                        type: 'gauge',
                        radius: '100%',
                        center: ['50%', '50%'],
                        startAngle: 90,
                        endAngle: -270,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#FE8500'
                            }, {
                                offset: 1,
                                color: '#FE6400'
                            }])
                        },
                        progress: {
                            show: true,
                            roundCap: true,
                            width: 6
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            roundCap: true,
                            lineStyle: {
                                width: 6,
                                opacity: 0.3
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        anchor: {
                            show: false
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            width: '60%',
                            lineHeight: 10,
                            borderRadius: 8,
                            offsetCenter: [0, 0],
                            fontSize: 6,
                            fontWeight: 'bolder',
                            formatter: '高',
                            color: '#FFFFFF'
                        },
                        data: [
                            {
                                value: 90
                            }
                        ]
                    },

                ]
            };
            echarts.init(this.$refs.chart_4).setOption(option);
        },
        // 告警阈值
        initChart_5() {
            var echarts = require('echarts');
            var option = {
                series: [
                    {
                        type: 'gauge',
                        radius: '100%',
                        center: ['50%', '50%'],
                        startAngle: 90,
                        endAngle: -270,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#0dbcf6'
                            }, {
                                offset: 1,
                                color: '#00a0e9'
                            }])
                        },
                        progress: {
                            show: true,
                            roundCap: true,
                            width: 6
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            roundCap: true,
                            lineStyle: {
                                width: 6,
                                opacity: 0.3
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        anchor: {
                            show: false
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            width: '60%',
                            lineHeight: 10,
                            borderRadius: 8,
                            offsetCenter: [0, 0],
                            fontSize: 6,
                            fontWeight: 'bolder',
                            formatter: '{value}',
                            color: '#FFFFFF'
                        },
                        data: [
                            {
                                value: 50
                            }
                        ]
                    },

                ]
            };
            echarts.init(this.$refs.chart_5).setOption(option);
        },
        // 告警数据
        initChart_6() {
            var echarts = require('echarts');
            var option = {
                series: [
                    {
                        type: 'gauge',
                        radius: '100%',
                        center: ['50%', '50%'],
                        startAngle: 90,
                        endAngle: -270,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#e4007e'
                            }, {
                                offset: 1,
                                color: '#e4007e'
                            }])
                        },
                        progress: {
                            show: true,
                            roundCap: true,
                            width: 6
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            roundCap: true,
                            lineStyle: {
                                width: 6,
                                opacity: 0.3
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        anchor: {
                            show: false
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            width: '60%',
                            lineHeight: 10,
                            borderRadius: 8,
                            offsetCenter: [0, 0],
                            fontSize: 6,
                            fontWeight: 'bolder',
                            formatter: '{value}',
                            color: '#FFFFFF'
                        },
                        data: [
                            {
                                value: 80
                            }
                        ]
                    },

                ]
            };
            echarts.init(this.$refs.chart_6).setOption(option);
        },
        // 环境执法监督
        initChart_7() {
            getComplaintData().then(res => {
                let _xAxis = [];
                let _data = [];
                if (res.code === '200' && res.data) {
                    this.chart_7_data.yearNum = res.data.yearNum;
                    this.chart_7_data.noHandle = res.data.noHandle;
                    this.chart_7_data.growth = res.data.growth;
                    if (res.data.monthData) {
                        let _monthData = res.data.monthData;
                        Object.keys(_monthData).forEach(item => {
                            _xAxis.push(item + '月');
                            _data.push(_monthData[item]);
                        })
                        var echarts = require('echarts');
                        let option = {
                            grid: {
                                left: "0",
                                right: "0",
                                bottom: "1%",
                                top: "20%",
                                containLabel: true,
                            },
                            tooltip: {
                                trigger: "axis",
                                backgroundColor: 'rgba(34, 40, 46, 0.5)',
                                borderWidth: "0", //边框宽度设置1
                                borderColor: "", //设置边框颜色
                                axisPointer: {
                                    type: "none",
                                },
                                textStyle: {
                                    color: "#ffffff" //设置文字颜色
                                },
                            },
                            backgroundColor: "",
                            yAxis: {
                                name: '单位/次',
                                nameLocation: 'end',
                                nameTextStyle: {
                                    padding: ['0', '0', '10', '0'],
                                    color: "#CCCCCC",
                                    fontSize: 10
                                },
                                nameGap: 5,
                                type: "value",
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: "#CCCCCC",
                                        fontSize: 10
                                    },
                                },
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        type: 'line',
                                        color: 'rgba(92,155,181)',
                                        width: 0.1,
                                    },
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLine: {
                                    lineStyle: {
                                        type: 'line',
                                        color: '#2A6FDA',
                                        width: 1,
                                    },
                                },
                            },
                            xAxis: [
                                {
                                    type: "category",
                                    axisTick: {
                                        show: false,
                                    },
                                    axisLabel: {
                                        show: true,
                                        textStyle: {
                                            color: "#CCCCCC",
                                            fontSize: 10
                                        },
                                    },
                                    data: _xAxis,
                                    // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                                },
                            ],
                            series: [
                                {
                                    type: 'bar',
                                    showBackground: false,
                                    itemStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {offset: 0, color: '#F28E26'},
                                            {offset: 0.5, color: 'rgba(253, 39, 131, 0.6)'},
                                            {offset: 1, color: 'rgba(253, 39, 131,0.41)'}
                                        ])
                                    },
                                    emphasis: {
                                        itemStyle: {
                                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                {offset: 0, color: '#F28E26'},
                                                {offset: 0.7, color: 'rgba(253, 39, 131, 0.6)'},
                                                {offset: 1, color: 'rgba(253, 39, 131,0.41)'}
                                            ])
                                        }
                                    },
                                    data: _data
                                }
                            ]
                        };
                        echarts.init(this.$refs.chart_7).setOption(option);
                    }
                }
            }).catch(() => {
            });
        },
    }
}
</script>

<style lang="scss">
@import "@/styles/scrollbar.scss";

.list_box {

  .checkbox {
    width: 100%;
    height: 100%;

    .el-checkbox {
      width: 100%;
      height: 100%;

      .el-checkbox__input {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .el-checkbox__inner {
          width: 4px;
          height: 4px;
          background-color: transparent;
        }
      }
    }

  }

  .el-checkbox__inner {
    width: 4px;
    height: 4px;
    background-color: transparent;
  }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;

  @function calWidth_2k($pixel) {
    @return calc($width_2k * $pixel / $width);
  }

  @function calWidthCenter($pixel) {
    @return calc($pixel / 5 * 8);
  }

  @function calHeight_2k($pixel) {
    @return calc($pixel / 1.8 * 2.7);
  }

  @function calFont_2k($pixel) {
    @return calc($height_2k * $pixel / $height);
  }

  .list_box {

    .checkbox {
      .el-checkbox {

        .el-checkbox__input {

          .el-checkbox__inner {
            height: calHeight_2k(4px);
            background-color: transparent;
          }
        }
      }

    }

    .el-checkbox__inner {
      height: calHeight_2k(4px);
    }
  }
}
</style>
<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxSize {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.rightView {
  position: relative;
  float: right;
  margin-top: 20px;
  align-items: center;

  .right_box {
    display: flex;
    flex-direction: row;
    height: 670px;
    align-items: center;
  }

  .shrink {
    width: 23px;
    height: 321px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_shrink_r.png");
  }

  .container {
    background-size: 100% 100%;

    &_title {
      width: 215px;
      height: 16px;
      display: flex;
      flex-direction: row;
      align-items: center;
      background-size: 100% 100%;
      background-image: url("@/assets/monitor/air/card_title.png");

      span {
        height: 16px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        margin-left: 11px;
        line-height: 16px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .head {
    height: 5px;
    justify-content: start;

    .sign {
      display: block;
      margin-right: 4px;
      width: 2px;
      height: 8px;
      background-color: #00E6FF;
    }

    .chart_title {
      font-size: 6px;
      color: #DDF8FF;
    }
  }

  .container_1 {
    padding: 2px 20px 0;
    justify-content: space-between;
    align-items: start;
    flex-direction: row;
    width: 243px;
    height: 300px;
    background-image: url("@/assets/monitor/air/card_bg_10.png");

    .part_left {
      width: 216px;

      .top {
        .container_title {
        }

        .chart_list {
          //margin-top: 13px;
          padding: 10px 0;

          height: 42px;
          background-color: rgba(0, 26, 68, 0.4);

          .chart_item {
            flex: 1;
            flex-direction: column;
            text-align: center;

            .chart_value {
              font-size: 11px;
            }

            .chart_name {
              font-size: 5px;
            }
          }

          .chart_item_1 {
            color: #1EE4FF;
          }

          .chart_item_2 {
            color: #FFA21E;
            border-left: 1px solid #00E6FF;
            border-right: 1px solid #00E6FF;
          }

          .chart_item_3 {
            color: #48FF1E;
          }
        }
      }

      .bottom {
        .container_title {
          margin-top: 6px;
        }

        .table_box {
          width: 210px;
          height: 170px;
          margin-top: 5px;
          overflow: hidden;

          table {
            width: 210px;
            background: rgba(18, 47, 116, 0.1);

            tr {
              th {
                font-size: 5px;
                color: #B4D7FA;
                font-weight: 400;
                text-align: center;
              }

              td {
                font-size: 4px;
                color: #ffffff;
                text-align: center;

                .table_btn {
                  display: inline-block;
                  padding: 0 2px;
                  color: #37BAF8;
                  cursor: pointer;
                }
              }
            }

            tr.single {
              background-color: rgba(0, 26, 68, 0.4);
            }
          }
        }
      }

    }

    .part_right {
      width: 216px;

      .top {
        .chart_des {
          width: 100%;
          text-align: center;
          margin-top: 5px;
          height: 8px;
          font-size: 8px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #00E6FF;
        }

        .chart_item {
          margin-top: 3px;

          .flex_box {
            margin-top: 5px;

            .chart_icon {
              width: 47px;
              height: 34px;
              background-size: 100% 100%;
              background-image: url("@/assets/monitor/air/chart_icon_2.png");
            }

            .chart_info {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: start;

              .chart_name {
                height: 5px;
                font-size: 5px;
                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #DDF8FF;
              }

              .chart_mini_name {
                height: 5px;
                margin-top: 4px;
                font-size: 5px;
                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #DDF8FF;
                opacity: 0.6;
              }
            }

            .chart_value {
              height: 12px;
              font-size: 10px;
              font-family: DINCondensed;
              font-weight: bold;
              color: #00E6FF;
            }

            .chart_detail {
              height: 5px;
              font-size: 5px;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #DDF8FF;

              span {
                margin-left: 5px;
                display: inline-block;
                height: 8px;
                font-size: 10px;
                font-family: DINCondensed;
                font-weight: bold;
                color: #00E6FF;
              }
            }
          }
        }

        .chart_des {
          height: 8px;
          font-size: 8px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          margin-bottom: 5px;
          color: #00E6FF;
        }
      }

      .bottom {
        margin-top: 5px;
        width: 100%;

        .chart_item {
          width: 100%;
          height: 110px;
        }
      }
    }

  }

  .container_2 {
    padding: 20px 24px 0;
    width: 243px;
    height: 350px;
    background-image: url("@/assets/monitor/air/card_bg_11.png");

    .container_title {
      width: 200px;
      height: 17px;
      line-height: 17px;
      background-size: 100% 100%;
      background-image: url("@/assets/monitor/air/chart_title_long.png");
    }

    .chart_list {
      flex-wrap: wrap;
      justify-content: space-between;

      .chart_item {
        margin-top: 10px;
        width: 212px;
        height: 110px;
        text-align: center;
        line-height: 110px;
        //border: 1px solid #00E6FF;
        //background-color: rgba(12, 13, 74, 0.5);

        .chart_content {
          padding: 4px 7px;
          width: 212px;
          height: 90px;

          .time {
            font-size: 6px;
            color: #ffffff;
            line-height: 13px;
          }
        }

        .chart_cover {
          padding: 0 9px;
          width: 212px;
          height: 16px;
          font-size: 6px;
          line-height: 16px;
          background: #000000;
          opacity: 0.3;
        }
      }
    }
  }

  .dialog_box {
    position: absolute;

    .head {
      width: 100%;
      justify-content: space-between;

      .chart_title {

        .txt {
          font-size: 11px;
          color: #DBE5FA;
        }

        .line {
          margin-top: 3px;
          width: 73px;
          height: 1px;
          background: #146BFF;
          border: 0px solid;
          border-image: linear-gradient(0deg, #0DCCFF, #4760FF) 10 10;
        }
      }

      .chart_close {
        width: 11px;
        height: 11px;
        background-size: 100% 100%;
        background-image: url("@/assets/monitor/air/close_icon.png");
        cursor: pointer;
      }
    }
  }

  .dialog_box_1 {
    left: -396px;
    top: 80px;
    padding: 12px;
    width: 396px;
    height: 499px;
    background-size: 100% 100%;
    background-image: url("@/assets/monitor/air/card_bg_15.png");

    .part_title {
      margin-top: 5px;
      margin-bottom: 10px;
      height: 7px;
      font-size: 7px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #00E6FF;
    }

    .top {
      width: 100%;

      .top_list {
        width: 185px;

        .top_item {
          display: flex;
          align-items: start;
          justify-content: start;
          width: 100%;
          height: 9px;
          margin-top: 12px;

          .item_name {
            min-width: 60px;
            text-align: left;
            font-size: 7px;
            color: #A6B7BF;
          }

          .item_value {
            font-size: 10px;
            color: #BEFFD0;
          }
        }
      }

      .top_list.full {
        width: 100%;
        height: 30px;

        .top_item {
          .item_value {
            flex: 1;
            height: 30px;
            line-height: 10px;
          }
        }
      }
    }

    .middle {
      margin-top: 10px;
      height: 20px;
      font-size: 7px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #BEFFD0;
      line-height: 10px;
    }

    .process_container {
      width: 100%;
      height: 90px;

      .svg_item {
        display: block;
        max-width: 100%;
        max-height: 90px;
        zoom: 0.18;

        svg {
          width: 100% !important;
          height: 90px !important;
        }
      }
    }

    .bottom {
      .list {
        .head {
          height: 16px;
          justify-content: start;
          align-items: start;

          .icon {
            width: 14px;

            .dot {
              width: 14px;
              height: 14px;
              background-size: 100% 100%;
              background-image: url("@/assets/monitor/air/process_icon.png");
            }
          }

          .content {
            padding-left: 9px;
            justify-content: space-between;
            flex: 1;
            height: 16px;
            background: rgba(17, 20, 24, 0.47);

            .title {
              font-size: 6px;
              color: #03EFFE;
            }

            .name {
              font-size: 6px;
              color: #ffffff;
            }

            .status {
              display: inline-block;
              padding: 2px 4px;
              height: 8px;
              line-height: 8px;
              text-align: center;
              border-radius: 4px;
              -webkit-border-radius: 4px;
              -moz-border-radius: 4px;
              -ms-border-radius: 4px;
              -o-border-radius: 4px;
              color: #00FF78;
              font-size: 5px;
            }

            .time {
              padding: 2px 0px;
              height: 8px;
              line-height: 8px;
              font-size: 5px;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #F0FCFF;
              opacity: 0.7;
            }
          }
        }

        .info {
          justify-content: start;
          align-items: start;

          .icon {
            width: 14px;

            .line {
              margin: 0 auto;
              width: 1px;
              height: 110px;
              background-color: #2E9AC1;
            }
          }

          .content {
            padding-left: 9px;
            flex: 1;

            .item {
              justify-content: start;
              align-items: start;
              margin-top: 5px;
              height: 6px;

              .title {
                width: 40px;
                height: 6px;
                font-size: 6px;
                color: #ffffff;
              }

              .value {
                flex: 1;
                height: 6px;
                font-size: 6px;
                color: #BEFFD0;
              }

              .value.source {
                color: #55DDFF;
                cursor: pointer;
              }
            }

            .item.img {
              height: 40px;

              .value {
                width: 75px;
                height: 40px;
                background: #111418;
                border: 1px solid #55DDFF;

                img {
                  display: block;
                  max-width: 100%;
                  max-height: 100%;
                }
              }
            }
          }
        }
      }
    }

  }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;

  @function calWidth_2k($pixel) {
    @return calc($width_2k * $pixel / $width);
  }

  @function calHeight_2k($pixel) {
    @return calc($pixel / 1.8 * 2.7);
  }

  @function calWidthCenter($pixel) {
    @return calc($pixel / 5 * 10);
  }

  @function calFont_2k($pixel) {
    @return calc($height_2k * $pixel / $height);
  }

  .flex {
  }

  .boxSize {
  }

  .rightView {
    position: relative;
    z-index: 3;
    margin-top: calHeight_2k(20px);

    .right_box {
      height: calHeight_2k(670px);
    }

    .shrink {
      height: calHeight_2k(321px);
    }

    .container {

      &_title {
        width: calWidthCenter(215px);
        height: calHeight_2k(16px);

        span {
          height: calHeight_2k(16px);
          margin-left: calWidthCenter(11px);
          line-height: calHeight_2k(16px);
        }
      }
    }

    .head {
      height: calHeight_2k(5px);

      .sign {
        margin-right: calWidthCenter(4px);
        width: calWidthCenter(2px);
        height: calHeight_2k(8px);
      }

      .chart_title {
      }
    }

    .container_1 {
      width: calWidthCenter(243px);
      height: calHeight_2k(300px);
      padding-top: calHeight_2k(20px);

      .part_left {
        width: calWidthCenter(216px);

        .top {
          .container_title {
          }

          .chart_list {
            //margin-top: calHeight_2k(13px);
            padding-top: calHeight_2k(10px);
            padding-bottom: calHeight_2k(10px);
            height: calHeight_2k(42px);

            .chart_item {

              .chart_value {
              }

              .chart_name {
              }
            }

            .chart_item_1 {
            }

            .chart_item_2 {
            }

            .chart_item_3 {
            }
          }
        }

        .bottom {
          .container_title {
            margin-top: calHeight_2k(6px);
          }

          .table_box {
            width: calWidthCenter(210px);
            height: calHeight_2k(170px);
            margin-top: calHeight_2k(5px);

            table {
              width: calWidthCenter(210px);

              tr {
                th {
                }

                td {

                  .table_btn {
                  }
                }
              }

              tr.single {
              }
            }
          }
        }

      }

      .part_right {
        width: calWidthCenter(216px);

        .top {
          .chart_des {
            margin-top: calHeight_2k(5px);
            height: calHeight_2k(8px);
          }

          .chart_item {
            margin-top: calHeight_2k(3px);

            .flex_box {
              margin-top: calHeight_2k(5px);

              .chart_icon {
                width: calWidthCenter(47px);
                height: calHeight_2k(34px);
              }

              .chart_info {

                .chart_name {
                  height: calHeight_2k(5px);
                }

                .chart_mini_name {
                  height: calHeight_2k(5px);
                  margin-top: calHeight_2k(4px);
                }
              }

              .chart_value {
                height: calHeight_2k(12px);
              }

              .chart_detail {
                height: calHeight_2k(5px);

                span {
                  margin-left: calWidthCenter(5px);
                  height: calHeight_2k(8px);
                }
              }
            }
          }

          .chart_des {
            height: calHeight_2k(8px);
            margin-bottom: calHeight_2k(5px);
          }
        }

        .bottom {
          margin-top: calHeight_2k(5px);

          .chart_item {
            height: calHeight_2k(110px);
            line-height: calHeight_2k(110px);
          }
        }
      }

    }

    .container_2 {
      width: calWidthCenter(243px);
      height: calHeight_2k(350px);

      .container_title {
        width: calWidthCenter(200px);
        height: calHeight_2k(17px);
        line-height: calHeight_2k(17px);
      }

      .chart_list {

        .chart_item {
          margin-top: calHeight_2k(10px);
          width: calWidthCenter(212px);
          height: calHeight_2k(110px);

          .chart_content {
            padding-top: calHeight_2k(7px);
            padding-bottom: calHeight_2k(7px);
            width: calWidthCenter(212px);
            height: calHeight_2k(90px);

            .time {
            }
          }

          .chart_cover {
            padding-top: calHeight_2k(9px);
            padding-bottom: calHeight_2k(9px);
            width: calWidthCenter(212px);
            height: calHeight_2k(16px);
            line-height: calHeight_2k(16px);
          }
        }
      }
    }

    .dialog_box {
      position: absolute;

      .head {
        justify-content: space-between;

        .chart_title {

          .txt {
          }

          .line {
            margin-top: calHeight_2k(3px);
            width: calWidthCenter(73px);
            height: calHeight_2k(1px);
          }
        }

        .chart_close {
          width: calWidthCenter(11px);
          height: calHeight_2k(11px);
        }
      }
    }

    .dialog_box_1 {
      left: calWidthCenter(-396px);
      top: calHeight_2k(80px);
      padding: calHeight_2k(12px);
      width: calWidthCenter(396px);
      height: calHeight_2k(499px);

      .part_title {
        margin-top: calHeight_2k(5px);
        margin-bottom: calHeight_2k(10px);
        height: calHeight_2k(7px);
      }

      .top {

        .top_list {
          width: calWidthCenter(185px);

          .top_item {
            height: calHeight_2k(9px);
            margin-top: calHeight_2k(12px);

            .item_name {
              min-width: calWidthCenter(60px);
            }

            .item_value {
            }
          }
        }

        .top_list.full {
          height: calHeight_2k(30px);

          .top_item {
            .item_value {
              height: calHeight_2k(30px);
              line-height: calHeight_2k(10px);
            }
          }
        }
      }

      .middle {
        margin-top: calHeight_2k(10px);
        height: calHeight_2k(20px);
        line-height: calHeight_2k(10px);
      }

      .process_container {
        height: calHeight_2k(90px);

        .svg_item {
          max-height: calHeight_2k(90px);

          svg {
            height: calHeight_2k(90px) !important;
          }
        }
      }

      .bottom {
        .list {
          .head {
            height: calHeight_2k(16px);

            .icon {
              width: calWidthCenter(14px);

              .dot {
                width: calWidthCenter(14px);
                height: calHeight_2k(14px);
                background-size: 100% 100%;
                background-image: url("@/assets/monitor/air/process_icon.png");
              }
            }

            .content {
              padding-left: calWidthCenter(9px);
              height: calHeight_2k(16px);

              .title {
              }

              .name {
              }

              .status {
                padding-top: calHeight_2k(4px);
                padding-bottom: calHeight_2k(4px);
                height: calHeight_2k(8px);
                line-height: calHeight_2k(8px);
              }

              .time {
                height: calHeight_2k(8px);
                line-height: calHeight_2k(8px);
              }
            }
          }

          .info {

            .icon {
              width: calWidthCenter(14px);

              .line {
                height: calHeight_2k(110px);
              }
            }

            .content {
              padding-left: calWidthCenter(9px);

              .item {
                margin-top: calHeight_2k(5px);
                height: calHeight_2k(6px);

                .title {
                  width: calWidthCenter(40px);
                  height: calHeight_2k(6px);
                  font-size: calHeight_2k(6px);
                }

                .value {
                  height: calHeight_2k(6px);
                }

                .value.source {
                }
              }

              .item.img {
                height: calHeight_2k(40px);

                .value {
                  width: calWidthCenter(75px);
                  height: calHeight_2k(40px);

                  img {
                  }
                }
              }
            }
          }
        }
      }

    }
  }
}
</style>
